<template>
  <div class="arrow-box flex align-center no-drag">
    <div class="arrow-item"
         @click="handleBack">
      <LeftOutlined />
    </div>
    <div class="arrow-item">
      <RightOutlined />
    </div>
  </div>

</template>

<script>
import { LeftOutlined, RightOutlined, } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router'
export default {
  components: {
    LeftOutlined, RightOutlined
  },
  setup() {
    const router = new useRouter()
    console.log(router);

    const handleBack = () => {
      router.back(-1)
    }

    return {
      handleBack
    }
  },
}
</script>

<style lang='scss' scoped >
.arrow-box {
  margin-right: 10px;
  .arrow-item {
    width: 24px;
    height: 24px;
    background-color: rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.2);
    margin: 0 3px;
  }
}
</style>